@grid: 24; //栅格
@full:100%; //总占比
.d-borderbox{
  box-sizing: border-box;
}
.d-row{
  display: flex;
  flex-wrap: wrap;
  position: relative;
  box-sizing: border-box;
  .d-borderbox();
}
.d-col{
  --full:@full;
  --grid:@grid;
  .d-borderbox();
}

.baseCol(@width){
  display: block;
  max-width: @width;
  flex: 0 0 @width;
}

.offsetCol(@width){
  margin-left: @width
}

.setCol(@size){
  @percent:calc(@size / @grid * @full);
  .d-col-@{size} {
    .baseCol(@percent);
  }
  .d-col-offset-@{size} {
    .offsetCol(@percent);
  }
}

.setSmCol(@size){
  @percent:calc(@size / @grid * @full);
  @media only screen and (max-width: 768px){
    .d-col-sm-@{size} {
      .baseCol(@percent);
    }
    .d-col-sm-offset-@{size} {
      .offsetCol(@percent);
    }
  }
}

.setMdCol(@size){
  @percent:calc(@size / @grid * @full);
  @media only screen and (min-width: 1200px){
    .d-col-md-@{size} {
      .baseCol(@percent);
    }
    .d-col-md-offset-@{size} {
      .offsetCol(@percent);
    }
  }
}

.setLgCol(@size){
  @percent:calc(@size / @grid * @full);
  @media only screen and (min-width: 1920px){
    .d-col-lg-@{size} {
      .baseCol(@percent);
    }
    .d-col-lg-offset-@{size} {
      .offsetCol(@percent);
    }
  }
}

.generCol(@n,@i: 0) when (@i =< @n){
  .setCol(@i);
  .generCol(@n, @i + 1)
}
.generSmCol(@n,@i: 0) when (@i =< @n){
  .setSmCol(@i);
  .generSmCol(@n, @i + 1)
}
.generMdCol(@n,@i: 0) when (@i =< @n){
  .setMdCol(@i);
  .generMdCol(@n, @i + 1)
}
.generLgCol(@n,@i: 0) when (@i =< @n){
  .setLgCol(@i);
  .generLgCol(@n, @i + 1)
}

//确保顺序
.generCol(@grid);
.generSmCol(@grid);
.generMdCol(@grid);
.generLgCol(@grid);